<%--
  Created by IntelliJ IDEA.
  User: lucongyue
  Date: 2017/12/5
  Time: 14:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<h1>自动回复设置</h1>
<div class="" id="conHeight">
    <div class="tab-content newContent">
        <p>数据总量：${pageInfo.total}条</p>
        <div class="search-form">
            <div class="form-inline">
                <div class="form-group">
                    <label>所属app：</label>
                    <select id="appId" class="form-control" value="${appId}" onchange="changeApp()">
                        <c:forEach var="appInfo" items="${appInfoList}">
                            <option value="${appInfo.appId}"
                                    <c:if test="${appInfo.appId eq appId}">selected</c:if>   >${appInfo.name}</option>
                        </c:forEach>
                    </select>
                </div>
                <br>
                <div class="form-group">
                    <input type="checkbox"
                           <c:if test="${true eq useAutoReply}">checked</c:if> id="useAutoReply">启用自动回复
                    <label>开始时间：</label>
                    <input id="beginTime" class="form-control" type="text" readonly value="${autoReplyBegin}">
                    <label>结束时间：</label>
                    <input id="endTime" class="form-control" type="text" readonly value="${autoReplyEnd}">
                    <i class="icon-time"></i>
                    <input onclick="saveConfigure()" type="button" value="保存" class="btn btn-primary">
                </div>

            </div>
        </div>
    </div>
</div>
<div class="tab-pane active" id="configuration">
    <div>
        <div class="no">
            <div class="actBtnGroup">
                <button type="button" class="btn btn-success" onclick="add()">添加</button>
                <button type="button" class="btn btn-warning" onclick="update()">编辑</button>
                <button type="button" class="btn btn-danger" onclick="del()">删除</button>
            </div>
            <table class=" data-table table table-striped table-responsive text-center"
                   style="word-break:break-all; word-wrap:break-word;">
                <thead>
                <tr>
                    <th width="2%"></th>
                    <th width="5%">序号</th>
                    <th width="15%">匹配规则</th>
                    <th width="15%">回复内容</th>
                    <th width="10%">优先级</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${pageInfo.list}" var="autoReply" varStatus="status">
                    <tr>
                        <td>
                            <input type="checkbox" name="selectCheckbox" value="${autoReply.id}"
                                   pattern="${autoReply.pattern}" content="${autoReply.content}"
                                   level="${autoReply.level}">
                        </td>
                        <td>${pageInfo.startRow+status.index}</td>
                        <td>${autoReply.pattern}</td>
                        <td>${autoReply.content}</td>
                        <td>${autoReply.level}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>


        </div>

    </div>
</div>
<!--分页开始-->
<div class="page">
    <c:if test="${pageInfo.total > 10 }">
        <ul class="pageMenu clearfix">
            <c:if test="${pageInfo.hasPreviousPage}">
                <li onclick="conditionPageQuery(${pageInfo.prePage});"><a href="#"
                                                                                     aria-label="Previous">
                    &lt;上一页 </a></li>
            </c:if>
            <c:forEach items="${pageInfo.navigatepageNums}" var="curretPageNum" varStatus="status">
                <c:choose>
                    <c:when test="${curretPageNum==pageInfo.pageNum}">
                        <li class="disabled"><a href="#">${curretPageNum}</a></li>
                    </c:when>
                    <c:otherwise>
                        <li onclick="conditionPageQuery(${curretPageNum});"><a href="#"
                        >${curretPageNum}</a>
                        </li>
                    </c:otherwise>
                </c:choose>
            </c:forEach>
            <c:if test="${pageInfo.hasNextPage}">
                <li onclick="conditionPageQuery(${pageInfo.nextPage});"><a href="#"
                                                                                      label="Next">
                    下一页&gt; </a></li>
            </c:if>
            <li class="last" style="font-size: 14px;">
                共<span class="totalPage">${pageInfo.pages}</span>页，跳转至 <input type="number"
                                                                              onkeyup='this.value=this.value.replace(/\D/gi,"")'
                                                                              class="keuInput"
                                                                              value="${pageInfo.pageNum}"
                                                                              id="pageTogo"/>
                <input type="button" class="btnSure" value="确定" onclick="pageSizeGo();" class="turnTo"/>
            </li>
        </ul>
    </c:if>
</div>
</div>

</div>

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 750px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" hidden id="addTitle">新增自动回复</h4>
                <h4 class="modal-title" hidden id="updateTitle">更新自动回复</h4>
            </div>
            <form id="new_data_form">
                <div class="modal-body">
                    <input hidden id="new-id">
                    <div class="form-inline row">
                        <label class="col-sm-2">匹配规则：</label>
                        <textarea type="text" class="col-sm-4 form-control" id="new-pattern"></textarea>
                        <label class="col-sm-2">回复内容：</label>
                        <textarea class="col-sm-4 form-control" type="text" id="new-content">
                        </textarea>
                    </div>
                    <div class="form-inline row" style="margin-top: 15px;">
                        <label class="col-sm-2">优先级：</label>
                        <input type="number" class="col-sm-4 form-control" id="new-level"></input>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="saveNewData()">保存</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>


<script>

    $('#beginTime').timepicker({
        minuteStep: 1,
        showSeconds: false,
        showMeridian: false,
        defaultTime: "00:00"
    });
    $('#endTime').timepicker({
        minuteStep: 1,
        showSeconds: false,
        showMeridian: false,
        defaultTime: "23:59"
    });

    var appId = "${appId}";

    function changeApp() {
        appId = $("#appId").val();
        conditionPageQuery(1);
    }

    function saveConfigure() {
        $.post("autoreply/configure", {
            "useAutoReply": $("#useAutoReply").is(':checked'),
            "autoReplyBegin": $("#beginTime").val(),
            "autoReplyEnd": $("#endTime").val(),
            "appId": "${appId}",
        }, function (data) {
            if (data.success) {
                alert("保存成功");
            } else {
                alert(data.msg);
            }
        })
    }

    function add() {
        clear();
        $("#addTitle").show();
        $("#addModal").modal("show");
    }

    function clear() {
        $("#addTitle").hide();
        $("#updateTitle").hide();
        $("#new-id").val("");
        $("#new-pattern").val("");
        $("#new-content").val("");
        $("#new-level").val("");
    }

    function saveNewData() {
        var autoReply = {};
        autoReply.pattern = $.trim($("#new-pattern").val());
        autoReply.content = $.trim($("#new-content").val());
        autoReply.level = $.trim($("#new-level").val());
        autoReply.id = $.trim($("#new-id").val());
        autoReply.appId = "${appId}";
        if (null == autoReply.content || "" == autoReply.content) {
            alert("回复内容不能为空");
            return;
        }
        if (null == autoReply.level || "" == autoReply.level) {
            alert("优先级不能为空");
            return;
        }
        if (null == autoReply.id || '' == autoReply.id) {
            $.post("autoreply/add", autoReply, function (data) {
                if (data.success) {
                    alert("添加成功");
                    $("#addModal").modal("hide");
                } else {
                    alert(data.msg);
                }
            })
        } else {
            $.post("autoreply/update", autoReply, function (data) {
                if (data.success) {
                    alert("更新成功");
                    $("#addModal").modal("hide");
                } else {
                    alert(data.msg);
                }
            })
        }
    }

    function del() {
        var id_array = [];
        $('input[name="selectCheckbox"]:checked').each(function () {
            id_array.push($(this).val());//向数组中添加元素
        });

        if (null == id_array || id_array.length == 0) {
            alert("请选择需要删除的数据");
            return;
        }

        if (!confirm("是否确认删除选中数据")) {
            return;
        }
        $.post("autoreply/del", {"idList": id_array, "appId": "${appId}"}, function (data) {
            if (data.success) {
                alert("删除成功");
                conditionPageQuery(1);
            } else {
                alert(data.msg);
            }
        })
    }

    function update() {
        var id_array = [];
        $('input[name="selectCheckbox"]:checked').each(function () {
            var object = {};
            object.id = $(this).val();
            object.pattern = $(this).attr("pattern");
            object.content = $(this).attr("content");
            object.level = $(this).attr("level");
            id_array.push(object);//向数组中添加元素
        });
        if (null == id_array || id_array.length == 0) {
            alert("请选择需要编辑的数据");
            return;
        }
        if (id_array.length > 1) {
            alert("只能编辑一条数据");
            return;
        }

        clear();
        $("#updateTitle").show();
        $("#new-id").val(id_array[0].id);
        $("#new-pattern").val(id_array[0].pattern);
        $("#new-content").val(id_array[0].content);
        $("#new-level").val(id_array[0].level);
        $("#addModal").modal("show");
    }

    /**
     * 避免bug使用modal消失时的事件刷新数据
     */
    $('#addModal').on('hidden.bs.modal', function () {
        conditionPageQuery(1);
    });

    function conditionPageQuery(currentPageNum) {
        var data = {
            "page": currentPageNum,
            "appId": appId,
        };
        $("#rightMainContent").load("index/autoreply", data);
    }

    function pageSizeGo() {
        var page = parseInt($("#pageTogo").val());
        var no = 1;
        var currentpage = parseInt("${pageInfo.pageNum }");
        var totalPage = parseInt("${pageInfo.pages }");

        if (currentpage == page) {

        }
        else if (0 < page && page < totalPage + 1) {
            conditionPageQuery(page);
        }
        else {
            alert("输入页数超出范围");
        }
    }
</script>
